<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
	</head>
	<body>
		<div id="app">
			<!-- 需求：需要对一个字符串进行翻转操作
				用户输入内容abc
				要求的输出内容 cba
				思路：字符串拆分为数组  将数组进行反转	将数组进行反转	将数组拼接成串
				reverse():将数组进行反转
				join('连接符')
			 -->
			 <!-- 计算属性调用时有缓存 -->
			 用户输入: <input type="text" v-model="msg"/><br>
			 常规调用:{{msg.split('').reverse().join('')}} <br>
			 计算属性调用:{{reverseMethod}}{{reverseMethod}}{{reverseMethod}} <br>
			 方法实现反转:{{reverseMe()}}{{reverseMe()}}{{reverseMe()}}
			 
		</div>
			
			
			<script src="../js/vue.js"></script>
			<script>
				const app=new Vue({
					el:"#app",
					data:{
						msg:''
					},
					//定义计算属性的key
					computed:{
						//指定计算属性的名称 要求有返回值
						reverseMethod(){
							console.log("计算属性调用")
							return this.msg.split('').reverse().join('')
						}
					},
					methods:{
						reverseMe(){
							console.log("方法调用")
							return this.msg.split('').reverse().join('')
						}
					}
					
				})
				
			</script>
	</body>
</html>
